<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/index_1.css">
  <style>
    .category {
        display: flex;
    }
    .search2 {
        flex: 1;
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;
        align-items: center;
        height: 120%;
    }

    .want-stars {
        flex: 1;
        margin-left: 20px; /* 控制表单和列表之间的间距 */
        width: 100%;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }

    li {
        margin-right: 10px; /* 控制列表项之间的间距 */
        transition: transform 0.3s; /* 添加过渡效果 */
    }
    li:hover {
        transform: scale(1.1); /* 鼠标悬停时放大元素 */

    }
    li:hover h4 {
        color: #00a4ff; /* 鼠标悬停时文字颜色变为红色 */
    }
    .star {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .star ul {
        display: flex;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .star li {
        list-style: none;
        margin: 10px;
        display: inline-block;
    }

    .star img {
        width: 100px;
        height: 100px;
        border-radius: 50%; /* 将图片变成圆形 */
        object-fit: cover;
    }
    h4 {
        margin-top: 5px;
    }
    .want-stars li:nth-child(n+10) {
        display: none; 
    }
    .want-stars ul {
        display: flex; /* 使用 Flexbox 布局 */
        justify-content: space-between; /* 在主轴上均匀分配元素间的空间 */
    }
    #wantForm {
        display: flex;
        align-items: center; /* 在交叉轴上居中对齐 */
        padding: 20px;
        border-radius: 5px;
    }
    
    #wantForm input,
    #wantForm select {
        margin: 5px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-right: 30px;
    }

    #wantForm button {
        padding: 8px 20px;
        background: #00a4ff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    #wantForm button:hover {
        background: #0056b3;
    }
    .hotStar {
        margin-right: auto; /* 使用 auto 将元素推到右边 */
    }
    .singer-detail {
      width: 1200px;
      height: 500px;
      margin: 0 auto;
    }
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ccc;
    }

    th {
      background-color: #f2f2f2;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    td a {
      margin: 0 30px;
    }

    a:hover {
      color: #0056b3;
    }
    .singer-name {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="wrapper">
        <!-- logo -->
        <div class="logo">
            <a href="#"></a>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li>
                    <a href="home.html">首页</a>
                </li>
                <li>
                    <a href="musictype.html">分类查询</a>
                </li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="请输入关键字">
            <a href="#"></a>
        </div>
        <!-- 用户 -->
        <div class="user">
            <a href="#">
                <img src="./uploads/user.png" alt="#">
                <span>卖报的小行家</span>
            </a>
        </div>
    </div>
  </div>
  <div class="category">
      <div class="wrapper">
          <div class="star">
            <div class="search2">
                <form action="" id="wantForm">
                    姓名：<input type="text" name="name" id="">
                    地区：<input type="text" name="country" id="">
                    风格：<select name="style" id="style">
                      <option value="">请选择(全部)</option>
                      <option value="1">流行</option>
                      <option value="2">摇滚</option>
                      <option value="3">民谣</option>
                      <option value="4">蓝调</option>
                      <option value="5">爵士</option>
                      <option value="6">funk</option>
                      <option value="7">重金属</option>
                      <option value="8">古典</option>
                      <option value="9">电子音乐</option>
                      <option value="10">fusion</option>
                  </select>
                    性别： <select name="gender" id="">
                        <option value="">请选择</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                    <button type="submit">搜索</button>
                </form>
            </div>
            <div class="want-stars">
                <div class="hotStar">
                    <h2>摇滚-热门歌手</h2>
                </div>
                <ul></ul>  
            </div>  
        </div>
      </div>
      
  </div>
  <div class="singer-name">
    <h2>热门歌曲</h2>
  </div>
  <div class="singer-detail">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>歌手</th>
          <th>歌曲名</th>
          <th>专辑名</th>
          <th style="width: 300px;">欣赏模式</th>
        </tr>
      </thead>
      <tbody id="songTableBody">
        <!-- 这里用 JavaScript 动态添加表格内容 -->
      </tbody>
    </table>
  </div>
  <div class="footer">
    <div class="wrapper">
        <div class="left">
            <a href="#">
                <img src="../images/log.png" alt="">
            </a>
            <p>
                这是一个练习型的网站，就是分享作者的一些音乐分享。
                音乐肯定是不全的，后续可以继续加内容。
                如果有什么建议，可以点击下面按钮，给我留言。
                若有违规音乐，请给我留言，届时下架。
            </p>
            <a href="#" class="give-me-advise">给我留言</a>
        </div>
        <div class="right">
            <dl>
                <dt>合作伙伴</dt>
                <dd><a href="#">就我一个</a></dd>
                <dd><a href="#">就我一个</a></dd>
            </dl>
        </div>
    </div>
</div>
</body>
<script src="../js/axios.min.js"></script>
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const style = decodeURIComponent(urlParams.get('style'));
  console.log("风格"+style);

  if (style !== "null") {
    getStarsByStyle(style)
    getSongsByStyle(style)
    console.log("进来了");

    //搜索

    const selectElement = document.getElementById("style");
    const options = selectElement.options;

    for (let i = 0; i < options.length; i++) {
      if (options[i].value === style) {
        options[i].selected = true;
        break;
      }
    }

    const form =  document.querySelector('#wantForm')
    form.addEventListener('submit',(e) => {
      e.preventDefault();
      const formData = new FormData(form)
      const name = formData.get('name')
      const style = formData.get("style")
      const country = formData.get("country")
      const gender = formData.get("gender")

      const wantStar = {
        "name":name,
        "image":"",
        "country":country,
        "style":style,
        "gender":gender
      }

      //搜索请求
      axios({
        url:"http://localhost:8080/stars/want",
        method:"post",
        data:wantStar,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(result => {
        
        const data = result.data.data
        wantStarsUl = document.querySelector('.want-stars').querySelector('ul')
        wantStarsUl.innerHTML= ''

        let searchStars = [];

        data.forEach(star => {
          const liElement = document.createElement('li');
          const aElement = document.createElement('a');
          const imgElement = document.createElement('img');
          const h4Element = document.createElement('h4');

          imgElement.src = star.image;
          h4Element.textContent = star.name;

          aElement.href = `singer-detail.html?name=${encodeURIComponent(star.name)}`;
          aElement.appendChild(imgElement);
          aElement.appendChild(h4Element);

          liElement.appendChild(aElement);
          wantStarsUl.appendChild(liElement);

          searchStars.push(star.name)
        })
        const searchStarSongs = [];
        const promises = searchStars.map(searchStar => {
          return axios({
            url: `http://localhost:8080/song?singer=${searchStar}`,
            method: "get"
          }).then(result => {
            return result.data.data;
          });
        });

        Promise.all(promises).then(results => {
          results.forEach(d => {
            d.forEach(so => {
              searchStarSongs.push(so);
            });
          });
          const tbody = document.getElementById('songTableBody');
          //清空前列表
          tbody.innerHTML = ""
          let index = 1
          searchStarSongs.forEach(song => {
            if (song.style === parseInt(style) ) {

              const row = document.createElement('tr');
              const indexCell = document.createElement('td');
              const nameCell = document.createElement('td');
              const albumCell = document.createElement('td');
              const videoCell = document.createElement('td');
              const singerCell = document.createElement('td')

              indexCell.textContent = index;
              singerCell.innerHTML = `<a href="singer-detail.html?name=${song.singer}" target="_blank">${song.singer}</a>` 
              albumCell.textContent = `《${song.album}》`
              nameCell.textContent = song.name;
              videoCell.innerHTML = `<a href="shiping.html?name=${song.name}&album=${song.album}" target="_blank">视频欣赏</a><a href="yinping.html?name=${song.name}&album=${song.album}" target="_blank">音乐欣赏</a>`;

              row.appendChild(indexCell);
              row.appendChild(singerCell);
              row.appendChild(nameCell);
              row.appendChild(albumCell);
              row.appendChild(videoCell);

              tbody.appendChild(row);

              index++
            }else if (style === ''){
              const row = document.createElement('tr');
              const indexCell = document.createElement('td');
              const nameCell = document.createElement('td');
              const albumCell = document.createElement('td');
              const videoCell = document.createElement('td');
              const singerCell = document.createElement('td')

              indexCell.textContent = index;
              singerCell.innerHTML = `<a href="singer-detail.html?name=${song.singer}" target="_blank">${song.singer}</a>` 
              albumCell.textContent = `《${song.album}》`
              nameCell.textContent = song.name;
              videoCell.innerHTML = `<a href="shiping.html?name=${song.name}&album=${song.album}" target="_blank">视频欣赏</a><a href="yinping.html?name=${song.name}&album=${song.album}" target="_blank">音乐欣赏</a>`;

              row.appendChild(indexCell);
              row.appendChild(singerCell);
              row.appendChild(nameCell);
              row.appendChild(albumCell);
              row.appendChild(videoCell);

              tbody.appendChild(row);

              index++
            }
          })
        });
      })
    })
  }else{
    getAllStars()
    getAllSongs()
  }


  function getAllStars() {
    axios({
      url:`http://localhost:8080/stars`,
      method:'get'
    }).then(result => {
        const data = result.data.data
        wantStarsUl = document.querySelector('.want-stars').querySelector('ul')
        wantStarsUl.innerHTML= ''
        let count = 0
        data.forEach(singer => {
          if (count < 9) {
            const liElement = document.createElement('li');
            const aElement = document.createElement('a');
            const imgElement = document.createElement('img');
            const h4Element = document.createElement('h4');

            imgElement.src = singer.image;
            h4Element.textContent = singer.name;
            aElement.href = `singer-detail.html?name=${encodeURIComponent(singer.name)}`;

            aElement.appendChild(imgElement);
            aElement.appendChild(h4Element);

            liElement.appendChild(aElement);
            wantStarsUl.appendChild(liElement);

            count++
          }
        })
    })
  }

  //按风格请求明星
  function getStarsByStyle(style) {
    axios({
      url:`http://localhost:8080/stars/${style}`,
      method:'get'
    }).then(result => {
        const data = result.data.data
        wantStarsUl = document.querySelector('.want-stars').querySelector('ul')
        wantStarsUl.innerHTML= ''
        let count = 0
        data.forEach(singer => {
          if (count < 9) {
            const liElement = document.createElement('li');
            const aElement = document.createElement('a');
            const imgElement = document.createElement('img');
            const h4Element = document.createElement('h4');

            imgElement.src = singer.image;
            h4Element.textContent = singer.name;
            aElement.href = `singer-detail.html?name=${encodeURIComponent(singer.name)}`;

            aElement.appendChild(imgElement);
            aElement.appendChild(h4Element);

            liElement.appendChild(aElement);
            wantStarsUl.appendChild(liElement);

            count++
          }
        })
    })
  }


  function getAllSongs() {
    axios({
    url:`http://localhost:8080/song/all`,
      method:'get'
    }).then(result => {

      const songData = result.data.data
      const tbody = document.getElementById('songTableBody');
      let index = 1

      songData.forEach((song) => {
        const row = document.createElement('tr');
        const indexCell = document.createElement('td');
        const nameCell = document.createElement('td');
        const albumCell = document.createElement('td');
        const videoCell = document.createElement('td');
        const singerCell = document.createElement('td')
        

        indexCell.textContent = index;
        singerCell.innerHTML = `<a href="singer-detail.html?name=${song.singer}" target="_blank">${song.singer}</a>` 
        albumCell.textContent = `《${song.album}》`
        nameCell.textContent = song.name;
        videoCell.innerHTML = `<a href="shiping.html?name=${song.name}&album=${song.album}" target="_blank">视频欣赏</a><a href="yinping.html?name=${song.name}&album=${song.album}" target="_blank">音乐欣赏</a>`;

        row.appendChild(indexCell);
        row.appendChild(singerCell);
        row.appendChild(nameCell);
        row.appendChild(albumCell);
        row.appendChild(videoCell);

        tbody.appendChild(row);

        index++
      })
    })
  }

  //按风格请求歌曲
  function getSongsByStyle(style) {

    axios({
    url:`http://localhost:8080/song/style/${style}`,
    method:'get'
  }).then(result => {

    const songData = result.data.data
      const tbody = document.getElementById('songTableBody');
      let index = 1

      songData.forEach((song) => {
        const row = document.createElement('tr');
        const indexCell = document.createElement('td');
        const nameCell = document.createElement('td');
        const albumCell = document.createElement('td');
        const videoCell = document.createElement('td');
        const singerCell = document.createElement('td')
        

        indexCell.textContent = index;
        singerCell.innerHTML = `<a href="singer-detail.html?name=${song.singer}" target="_blank">${song.singer}</a>` 
        albumCell.textContent = `《${song.album}》`
        nameCell.textContent = song.name;
        videoCell.innerHTML = `<a href="shiping.html?name=${song.name}&album=${song.album}" target="_blank">视频欣赏</a><a href="yinping.html?name=${song.name}&album=${song.album}" target="_blank">音乐欣赏</a>`;

        row.appendChild(indexCell);
        row.appendChild(singerCell);
        row.appendChild(nameCell);
        row.appendChild(albumCell);
        row.appendChild(videoCell);

        tbody.appendChild(row);

        index++
      })
    })
  }


// 从 localStorage 中获取存储的数据
const storedUsername = localStorage.getItem('username');
const storedImage = localStorage.getItem('imageFile'); // 假设这里是存储的图片 base64 编码数据

// 更新 <img> 元素
const imgElement = document.querySelector('.user img');
imgElement.src = storedImage; // 设置图片的 src 属性

// 更新 <span> 元素
const spanElement = document.querySelector('.user span');
spanElement.textContent = storedUsername; // 设置 span 元素的文本内容
  
</script>
</html>